<template>
  <div>
    <div class="title">客户信息</div>
    <lb-table
      ref="lbTable"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableDataTop.column"
      :data="tableDataTop.data"
      height="300px"
      pagination
      :immediate-fetch="false"
      :total="tableDataTop.total"
      @fetch="getTopData"
    />
    <div class="title">相关用户</div>
    <lb-table
      ref="lbTable"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableDataBottom.column"
      :data="tableDataBottom.data"
      height="300px"
      pagination
      :immediate-fetch="false"
      :total="tableDataBottom.total"
      @fetch="getBottomData"
    />
  </div>
</template>

<script>
  import { parseTime, formatColumnMap } from '@/utils'
  import { queryCsmGroupDetailList } from '@/api'

  export default {
    name: 'tab-csmGroup',
    components: { },
    props: {
      csmInfo: {
        type: Object,
        required: true
      },
      groupTypeMap: {
        type: Array,
        required: true
      },
      subTypeAllList: {
        type: Array,
        required: true
      },
      customerTypeMap: {
        type: Array,
        required: true
      },
      csmStatusMap: {
        type: Array,
        required: true
      }
    },
    data() {
      return {

        tableDataTop: {
          column: [
            {
              type: 'index'
            },
            {
              prop: 'groupCode',
              label: '组号',
              align: 'center'
              // render: (h, { row }) => <el-link underline={false} onClick={() => this.openCsmDetail(row)}>{row.groupCode}</el-link>
            },
            {
              prop: 'groupType',
              label: '组类型',
              render: (h, { row }) => <span>{row.groupType && formatColumnMap(this.groupTypeMap, 'value', row.groupType, 'desc')}</span>
            },
            {
              prop: 'groupName',
              label: '组名称'
            },
            {
              prop: 'csmCode',
              label: '客户编号',
              width: 105
            },
            {
              prop: 'csmName',
              label: '客户名称'
            },
            {
              prop: 'sfzh',
              width: 200,
              label: '身份证号'
            },
            {
              prop: 'csmStatus',
              label: '客户状态',
              render: (h, { row }) => <span>{ row.csmStatus && formatColumnMap(this.csmStatusMap, 'value', row.csmStatus, 'desc') }</span>
            },
            {
              prop: 'cardNo',
              label: '营业执照'
            },
            {
              prop: 'groupStatus',
              label: '状态',
              render: (h, { row }) => <span>{ row.groupStatus === 1 ? '作废' : '正常' }</span>
            },
            {
              prop: 'csmType',
              label: '客户类型',
              render: (h, { row }) => <span>{ row.csmType && formatColumnMap(this.customerTypeMap, 'value', row.csmType, 'desc') }</span>
            },
            {
              prop: 'subType',
              label: '用气性质',
              width: 110,
              render: (h, { row }) => <span>{ row.subType ? formatColumnMap(this.subTypeAllList, 'value', row.subType, 'label') : ''}</span>
            },
            {
              prop: 'nearStationName',
              width: 150,
              label: '所属机构'
            },
            {
              prop: 'csmRgPhone',
              width: 110,
              label: '联系电话'
            },
            {
              prop: 'csmRgAddress',
              width: 200,
              label: '地址',
              showOverflowTooltip: true
            },
            {
              prop: 'createTime',
              label: '开户日期',
              showOverflowTooltip: true,
              render: (h, { row }) => <span>{ row.createTime && parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
            }
          ],
          data: []
        },
        tableDataBottom: {
          column: [

            {
              type: 'index'
            },
            {
              prop: 'csmCode',
              label: '客户编号',
              width: 105
            },
            {
              prop: 'csmName',
              label: '客户名称'
            },
            {
              prop: 'csmStatus',
              label: '客户状态',
              render: (h, { row }) => <span>{ row.csmStatus && formatColumnMap(this.csmStatusMap, 'value', row.csmStatus, 'desc') }</span>
            },
            {
              prop: 'cardNo',
              label: '营业执照'
            },
            {
              prop: 'sfzh',
              width: 200,
              label: '身份证号'
            },
            {
              prop: 'groupStatus',
              label: '状态',
              render: (h, { row }) => <span>{ row.groupStatus === 1 ? '作废' : '正常' }</span>
            },
            {
              prop: 'csmType',
              label: '客户类型',
              render: (h, { row }) => <span>{ row.csmType && formatColumnMap(this.customerTypeMap, 'value', row.csmType, 'desc') }</span>
            },
            {
              prop: 'subType',
              label: '用气性质',
              width: 110,
              render: (h, { row }) => <span>{ row.subType ? formatColumnMap(this.subTypeAllList, 'value', row.subType, 'label') : ''}</span>
            },
            {
              prop: 'nearStationName',
              width: 150,
              label: '所属机构'
            },
            {
              prop: 'csmRgPhone',
              width: 110,
              label: '联系电话'
            },
            {
              prop: 'csmRgAddress',
              width: 200,
              label: '地址',
              showOverflowTooltip: true
            //   render: (h, { row }) => <span >
            //   <span class='point-span' onClick={() => this.getMap(row)}>{this.$permission(8) && <i class='el-icon-location linkColor' style='cursor: pointer;'/>}</span>{ row.csmRgAddress }
            // </span>
            },
            {
              prop: 'createTime',
              label: '开户日期',
              showOverflowTooltip: true,
              render: (h, { row }) => <span>{ row.createTime && parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
            }
          ],
          data: []
        }
      }
    },
    mounted() {
    },
    methods: {
      // 查询枚举
      // async queryOptionsMap() {
      //   const [res1, res2, res3, res4, res5, res6, res7] = await Promise.all([
      //     mergeAsyncFunc(queryMap, { enumName: 'OrderStatus' }),
      //     mergeAsyncFunc(queryMap, { enumName: 'OrderFlag' }),
      //     mergeAsyncFunc(queryMap, { enumName: 'CustomerType' }),
      //     mergeAsyncFunc(queryMap, { enumName: 'PayStatus' }),
      //     mergeAsyncFunc(queryMap, { enumName: 'PaymentMethod' }),
      //     mergeAsyncFunc(queryMap, { enumName: 'ReStatus' }),
      //     mergeAsyncFunc(queryMap, { enumName: 'OrderSource' })
      //   ])
      //   this.orderStatusMap = res1.data.filter((item) => item.value !== 6) // 订单类型(去掉‘已转派’)
      //   this.orderFlagMap = res2.data // 订单类型
      //   this.customerTypeMap = res3.data // 客户类型
      //   this.payStatusMap = res4.data // 支付状态
      //   this.paymentMethodMap = res5.data.filter(item => item.value === 1 || item.value === 2 || item.value === 16 || item.value === 128 || item.value === 256 || item.value === 2048) // 支付方式
      //   this.reStatusMap = res6.data // 回执状态
      //   this.orderSourceMap = res7.data // 订单来源
      // },
      async getData() {
        this.getTopData({ currentPage: 1, pageSize: 20 })
        this.getBottomData({ currentPage: 1, pageSize: 20 })
      },
      async getTopData({ currentPage, pageSize }) {
        // console.log(this.csmInfo)
        if (!this.csmInfo.groupCode) return
        const params = {
          currentPage,
          pageSize,
          groupCode: this.csmInfo.groupCode,
          isGroup: 1
        }
        const res = await queryCsmGroupDetailList(params)
        this.tableDataTop.data = res.data.rows
        this.tableDataTop.total = res.data.total
      },
      async getBottomData({ currentPage, pageSize }) {
        if (!this.csmInfo.cardNoItems.length) return
        const params = {
          currentPage,
          pageSize,
          cardNo: this.csmInfo.cardNoItems[0].cardNo
        }
        const res = await queryCsmGroupDetailList(params)
        this.tableDataBottom.data = res.data.rows
        this.tableDataBottom.total = res.data.total
      },
      // 点击订单号
      async openOrderDetail(row) {
        await this.$refs.orderDetail.open(row, true)
      }
    }
  }
</script>

<style lang='scss' scoped>
.title {
  padding: 10px 0;
  font-size: 15px;
  font-weight: 700;
  color: #38BDBD;
}
</style>
